<template>
  <div class="status-box">
    <a-tag :color="tagColor" v-bind="$attrs" v-on="$listeners">
      <g-ellipsis
        :content="$t(tagText)"
        :maxWidth="'100%'"
        class="step-title"
      ></g-ellipsis>
    </a-tag>
  </div>
</template>

<script>
const StatusBoxBgColors = {
  ENABLE: '#87d068',
  DISABLED: '#a8a8a8'
}
export default {
  name: 'StatusBox',
  props: {
    customStatus: {
      type: Object,
      default() {
        return {
          label: '',
          statusType: ''
        }
      }
    },
    color: {
      type: String,
      default: ''
    },
    status: {
      type: Number|String,
      default: undefined
    }
  },
  data() {
    return {
      
    };
  },
  computed: {
    tagColor() {
      if (this.color) return this.color
      if(this.isCustomTag && this.customStatus.statusType) {
        return StatusBoxBgColors[this.customStatus.statusType]
      }
      return StatusBoxBgColors[this.status == 1  ? 'ENABLE' : 'DISABLED']
    },
    tagText() {
      if(!this.isCustomTag) {
        if(['number', 'string'].includes(typeof this.status)) {
          return this.status == 1 ? this.$t('启用') : this.$t('禁用')
        }
      }
      return this.customStatus.label
    },
    isCustomTag() {
      return this.customStatus && (this.customStatus.label || this.customStatus.statusType)
    }
  },
  mounted() {
    
  },

  methods: {
    
  },
};
</script>

<style lang="scss">
.status-box {
  width: 54px;
  height: 24px;
  overflow: hidden;
  margin: auto;
  .ant-tag {
    display: block;
    width: 100%;
    height: 100%; 
    font-size: 12px;
    line-height: 22px;
    text-align: center;
    border-radius: 2px;
  }
}
</style>